<template>
	<div>
		<div class="bar-top">
			<search-bar :batch_title="batch_title" :status="status" @getWorkExamBatchList="getWorkExamBatchList"></search-bar>
		</div>

		<div class="oe-major-exam" v-loading="loading">
			<div class="oe-content-list" v-if="list.length > 0&&!showCount">
				<div class="oe-content-lis clearfix" v-for="(item, index) in list" :key="index">
					<div class="lis-mess">
						<div class="left">
							<div class="test-title">{{ item.Title }}</div>
							<div class="test-time">考试时间：{{ item.StartTime }}至{{ item.EndTime }}</div>
							<div class="test-address">
								<span v-if="item.Address">考试地点：{{ item.Address }} </span> 请提前{{ item.AdvanceTime }}分钟登录
							</div>

						</div>
						<div class="right">
							<!-- <div class="oe-lis-op-box" v-if="item.State == 0">
							<i class="iconfont icon-yitijiao weitijiao"></i>
							<p>未提交</p>
						</div>
						<div class="oe-lis-op-box" v-if="item.State == 1">
							<i class="iconfont icon-yitijiao"></i>
							<p>已提交未批</p>
						</div>
						<div class="oe-lis-op-box" v-if="item.State == 2">
							<div v-if="item.GetScore != '成绩未公布'">
								<span style="color: #f56353; font-size: 30px">{{ item.GetScore }}
									<a-tooltip placement="bottom" v-if="item.GetScore != item.ExamScore">
										<template slot="title">
											<span>因考试切屏或摄像监测异常，产生了扣分</span>
										</template>
										<i class="iconfont icon-wenti" style="color: red"></i>
									</a-tooltip>
								</span>
								<p>分数</p>
							</div>
							<div v-else>
								<span style="color: #f56353; font-size: 28px; vertical-align: 8px">{{ item.GetScore }}</span>
							</div>
						</div> -->

							<!-- <div class="oe-lis-op-box" @click="getEnterExam(item)" v-if="item.State != 1 && item.State != 2">
							<i class="iconfont icon-chakan"></i>
							<p>去考试</p>
						</div>
						<div class="oe-lis-op-box" @click="getPreviewExam(item)" v-else-if="item.IsShowAnswerRecordPublish">
							<i class="iconfont icon-chakan"></i>
							<p>查看</p>
						</div> -->

							<div class="start-test" @click="getEnterExam(item)" v-if="item.State != 1 && item.State != 2">
								进入
							</div>

						</div>
					</div>
					<!-- <div class="oe-lis-mess fl">
					<h3 class="oe-lis-h">{{ item.Title }}</h3>
					<div class="oe-lis-time">
						<p class="oe-lis-p">考试时间：{{ item.StartTime }}至{{ item.EndTime }}</p>
						<p class="oe-lis-p">
							<span style="margin-right: 10px" v-if="item.Address">考试地点：{{ item.Address }}</span>请提前{{ item.AdvanceTime }}分钟登录
						</p>
					</div>
				</div>
				<div class="oe-lis-operate fr">
					<div class="oe-lis-op-box" v-if="item.State == 0">
						<i class="iconfont icon-yitijiao weitijiao"></i>
						<p>未提交</p>
					</div>
					<div class="oe-lis-op-box" v-if="item.State == 1">
						<i class="iconfont icon-yitijiao"></i>
						<p>已提交未批</p>
					</div>
					<div class="oe-lis-op-box" v-if="item.State == 2">
						<div v-if="item.GetScore != '成绩未公布'">
							<span style="color: #f56353; font-size: 30px">{{ item.GetScore }}
								<a-tooltip placement="bottom" v-if="item.GetScore != item.ExamScore">
									<template slot="title">
										<span>因考试切屏或摄像监测异常，产生了扣分</span>
									</template>
									<i class="iconfont icon-wenti" style="color: red"></i>
								</a-tooltip>
							</span>
							<p>分数</p>
						</div>
						<div v-else>
							<span style="color: #f56353; font-size: 28px; vertical-align: 8px">{{ item.GetScore }}</span>
						</div>
					</div>
					<div class="oe-lis-op-box" @click="getEnterExam(item)" v-if="item.State != 1 && item.State != 2">
						<i class="iconfont icon-chakan"></i>
						<p>去考试</p>
					</div>
					<div class="oe-lis-op-box" @click="getPreviewExam(item)" v-else-if="item.IsShowAnswerRecordPublish">
						<i class="iconfont icon-chakan"></i>
						<p>查看</p>
					</div>
				</div> -->
					<div class="oe-lis-statu-down" v-if="item.ExamMode == 1">线下</div>
					<div class="oe-lis-statu" v-if="item.IsRepair">补考</div>
					<div class="oe-lis-span">要求：{{ item.Remark || '暂无要求' }}</div>
				</div>
			</div>
			<div v-else class="no-data">暂无数据</div>
			<div style="text-align: center;" v-if="list.length > 0&&!showCount">
				<a-pagination v-model="pagination.pageIndex" :total="pagination.totalCount" :showSizeChanger="true" :show-total="total => `共 ${total} 条`" @change="getChange" @showSizeChange="getSizeChange" />
			</div>

			<div class="count-down-cont" v-if="showCount&&seconds">
				<div>
					<img src="../../../assets/images/count.png" alt="">
				</div>
				<div class="count-down">
					<div class="title">距离考试开始时间还剩</div>
					<div class="time-count">
						<div class="hour">{{hour}}</div> : <div class="minutes">{{minutes}}</div> : <div class="seconds">{{seconds}}</div>
					</div>
				</div>
			</div>

			<!-- 首次进入需要认证 -->
			<a-modal v-model="firstTimeEnterVisible" :maskClosable="false" centered>
				<template #title>
					<div class="title">提示</div>
				</template>
				<div class="enter-tips">
					首次进入考试前请先完成实名认证
				</div>

				<template #footer>
					<div class="footer">
						<div class="recognition" @click="facialRecognitionAcquisition">
							立即认证
						</div>
						<div class="cancel" @click="handleCancelRecognition">
							取消
						</div>
					</div>
				</template>
			</a-modal>

			<!-- 考前须知 -->
			<test-instruction v-if="instructionVisible" @hide="instructionVisible=false"></test-instruction>
		</div>
	</div>
</template>

<script>
import searchBar from '../components/search-bar.vue';
import TestInstruction from '@/components/tes-instructions/index.vue';
export default {
	components: {
		searchBar,
		TestInstruction,
	},
	data() {
		return {
			homeWorkName: '',
			// batchId: 'u5b2ac6r64hkg3em8xunww',
			batchId: localStorage.getItem('bacthId'),
			sortId: localStorage.getItem('sortId') || '',
			list: [],
			pagination: {
				totalCount: 0, // 总数,
				pageSize: 10, //每页个数,
				pageIndex: 1, //第几页,
			},
			loading: false,
			batch_title: '',
			status: '正在进行',
			firstTimeEnterVisible: false,
			instructionVisible: false,
			countTime: '', // 倒计时
			showCount: true,
			hour: '',
			minutes: '',
			seconds: '',
			timer: null,
		};
	},
	created() {
		this.batch_title = JSON.parse(localStorage.getItem('sortItem')).Title;
	},
	mounted() {
		this.getWorkExamBatchList();
	},
	methods: {
		handleCancelRecognition() {
			this.firstTimeEnterVisible = false;
		},
		facialRecognitionAcquisition() {
			this.instructionVisible = true;
		},
		getWorkExamBatchList(name) {
			this.loading = true;
			this.$http
				.post('/api/study/workexam/getWorkExamBatchList', {
					type: 1, //考试的状态：1->正在进行，2->即将开始，3->已经截止
					batchId: this.batchId || '', //分类Id
					sortId: this.sortId,
					homeWorkName: name || this.homeWorkName || '',
					pageSize: this.pagination.pageSize,
					page: this.pagination.pageIndex,
				})
				.then((res) => {
					this.loading = false;
					localStorage.setItem('sortId', this.sortId);
					if (res.code > 0) {
						this.list = res.list;
						this.pagination = res.pagination;

						if (this.list.length) {
							// 开启倒计时
							let startTime = new Date(this.list[0].StartTime);
							let now = new Date();
							console.log(startTime < now);

							clearInterval(this.timer);
							if (startTime > now) {
								this.showCount = true;
								this.showCountDown(this.list);
							} else {
								this.showCount = false;
							}
						}
					} else {
						this.$message.error(res.msg);
					}
				});
		},
		showCountDown(list) {
			var preDate = new Date(list[0].StartTime);
			var preTimes = preDate.getTime(); // 获取目标日期距离1970年1月1日毫秒数
			// 2. 开启定时器
			this.timer = setInterval(() => {
				// 3. 获取当前时间
				let nowDate = new Date();
				// 4. 获取距离1970年1月1日毫秒数
				let nowTimes = nowDate.getTime();
				// 5. 获取剩余毫秒数
				let lastTimes = preTimes - nowTimes;
				// 6. 毫秒转换
				// ① 毫秒转换为秒
				let lastSeconds = parseInt(lastTimes / 1000);
				// ② 通过秒转天、时、分、秒
				let lastD = size(parseInt(lastSeconds / 3600 / 24));
				let lastH = size(parseInt((lastSeconds / 3600) % 24));
				let lastM = size(parseInt((lastSeconds / 60) % 60));
				let lastS = size(parseInt(lastSeconds % 60));
				// 7. 将结果放入div
				this.hour = lastH;
				this.minutes = lastM;
				this.seconds = lastS;
				console.log(parseInt((lastSeconds / 60) % 60), parseInt(lastSeconds % 60));
				if (
					parseInt((lastSeconds / 3600) % 24) == 0 &&
					parseInt((lastSeconds / 60) % 60) == 0 &&
					parseInt(lastSeconds % 60) == 0
				) {
					clearInterval(this.timer);
					this.showCount = false;
				}
			}, 1000);

			function size(number) {
				return number < 10 ? '0' + number : number;
			}
		},
		getChange(value) {
			this.pagination.pageIndex = value;
			this.getWorkExamBatchList();
		},
		getSizeChange(current, size) {
			this.pagination.pageSize = size;
			this.getWorkExamBatchList();
		},
		getEnterExam(data) {
			// 首次进入需要认证
			// let first_enter = true;
			// if (first_enter) {
			// 	this.firstTimeEnterVisible = true;
			// } else {
			if (data.LoginType == 2) {
				this.$router.push({
					name: 'wordLogin',
					params: {
						examId: data.Id,
					},
				});
			} else {
				this.$router.push({
					name: 'enterExam',
					params: {
						Id: data.Id, //考试Id
					},
				});
			}
			// }
		},
		getPreviewExam(data) {
			this.$router.push({
				name: 'previewExam',
				params: {
					Id: data.Id, //考试Id
				},
			});
		},
	},
};
</script>
